﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery Template入门</title>
    <link href="styles/site.css" rel="stylesheet" />
</head>
<body>
    <script id="applicantsTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td>${ID}</td>
            <td>${Name}</td>
            <td>${Gender}</td>
            <td>${Birthday}</td>
            <td>${Email}</td>
            <td>${TargetCity}</td>
            <td>${Skills}</td>
        </tr>
    </script>
    <div>
        <h2 id="title">应聘员工信息</h2>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>电子邮件</th>
                    <th>期望工作地点</th>
                    <th>技能</th>
                </tr>
            </thead>
            <tbody id="applicantsTable">
            </tbody>
        </table>
    </div>

    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="scripts/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        // 定义数据集合
        var applicants = [
            {
                ID: "1001", Name: "Jerry", Gender: 1, Birthday: new Date(1980, 1, 1), TargetCity: "北京", Email: "jerry@etc.com",
                Skills: [{ Name: ".NET" }, { Name: "C++" }, { Name: "网络管理" }]
            },
            {
                ID: "1002", Name: "Jam", Gender: 0, Birthday: new Date(1983, 12, 31), TargetCity: "北京", Email: "jam@etc.com",
                Skills: [{ Name: "Java" }, { Name: "HTML" }]
            },
            {
                ID: "1003", Name: "David", Gender: 1, Birthday: new Date(1974, 3, 7), TargetCity: "广州", Email: "david@etc.com",
                Skills: [{ Name: ".NET" }, { Name: "数据库" }, { Name: "系统架构" }]
            },
            {
                ID: "1004", Name: "Tom", Gender: 1, Birthday: new Date(1972, 5, 12), TargetCity: "上海", Email: "tom@etc.com",
                // 此对象没有"Skills"属性
            }
        ];

        $(function () {
            // 针对单个数据直接绑定到模版上，并且添加到某个HTML元素中
            // 注意$item.data指的就是$.tmpl函数中的第二个参数的数据值
            $.tmpl("<h3>共${$item.data}人</h3>", applicants.length).appendTo('#title');

            // 将数据绑定到模版上，并且添加到某个HTML元素中
            $.tmpl(applicantsTemplate, applicants).appendTo('#applicantsTable');        // 或者
            //$("#applicantsTemplate").tmpl(applicants).appendTo("#applicantsTable");
        });
    </script>
</body>
</html>
